<template>
    <div class="release">
       <!-- 导航栏开始 -->
        <div class="banner">
            <!-- 版心开始 -->
            <div class="container">
                <ul class="channelList">
                    <router-link to="/Home" tag="li">首页</router-link>
                    <router-link tag="li" to="/secondHand">二手房</router-link>
                    <router-link tag="li" to="/AnewHouse">新房</router-link>
                    <router-link to="/rental" tag="li">租房</router-link>
                    <router-link tag="li" to="/Office">写字楼</router-link>
                    <router-link tag="li" to="/village">小区</router-link>
                    <li>问答</li>
                    <li>工具</li>
                    <li class="selected">发布房源</li>
                </ul>
                <!-- 导航栏右边 -->
                <div class="bannerRight">
                    <div class="login">
                        <i></i>
                        <span v-if="!userInfo">登录</span>
                        <span v-if="!userInfo">/</span>
                        <span v-if="!userInfo">注册</span>
                        <router-link to="/userInfo" tag="span" v-if="userInfo">{{userInfo}}</router-link>
                        <span v-if="userInfo">退出</span>
                    </div>
                    <div class="phone">
                        <i></i>
                        <span>热线电话1010-9000</span>
                    </div>
                    
                </div>
            </div>
            <!-- 版心结束 -->
        </div>
        <!-- 头部开始 -->
        <div class="release-header">
            <div class="container">
                <!-- 菜单栏 -->
                <div class="meau">
                    <div class="meauLeft">
                        <div class="logo"></div>
                        <ul class="typeList">
                            <li :class="{'selected':selectIndex == 0}" @click="selectIndex = 0">我要卖房</li>
                            <li :class="{'selected':selectIndex == 1}" @click="selectIndex = 1">委托出租</li>
                        </ul>
                    </div>
                    <div class="meauRight">
                        <i></i>
                        <span>欢迎来到遇家</span>
                    </div>
                </div>
                <!-- logo图案 -->
                <div class="logoTitle" v-show="selectIndex == 0">
                    <div class="tit">发布出售房源</div>
                    <div class="sub-tit">8000+全国链家门店·10万+全国经纪人·链家倾情服务15年+</div>
                </div>
                <div class="logoTitle"  v-show="selectIndex == 1">
                    <div class="tit">发布出租房源</div>
                    <div class="sub-tit">数万线下门店 · 快速全城推广 · 专业经纪人服务</div>
                </div>
            </div>
        </div>
        <!-- 房源发布信息 -->
        <div class="m-form">
            <!-- 左边 -->
            <div class="box-left" v-show="selectIndex == 0">
                <ul>
                    <li>
                        <h3>小区所在的城市</h3>
                        <!-- <div class="city">广州</div> -->
                         <input type="text" class="info" placeholder="请输入小区所在城市" v-model="city">

                    </li>
                    <li>
                        <h3>小区</h3>
                        <input type="text" class="info" placeholder="请输入小区名" v-model="name">
                    </li>
                    <li>
                        <h3>房屋地址</h3>
                        <input type="text" class="info" placeholder="请输入房屋地址" v-model="address">
                    </li>
                    <li>
                        <h3>期望售价</h3>
                        <input type="text" class="info" placeholder="请输入期望售价" v-model="price">
                    </li>
                    <li>
                        <h3>称呼</h3>
                        <input type="text" class="info" placeholder="请输入您的称呼" v-model="Myname">
                    </li>
                    <li>
                        <h3>手机号码</h3>
                        <input type="text" class="info" placeholder="请输入手机号码" v-model="tel">
                    </li>
                </ul>
            </div>
            <!-- 右边 -->
            <div class="box-right" v-show="selectIndex == 0">
                <!-- 头部 -->
                <div class="hd">
                    <div class="tit">广州 成交均价</div>
                    <div class="sub-tit">
                        <span class="num">31554</span>
                        <span class="unit">元/m²</span>
                    </div>
                </div>
                <!-- 相关联系 -->
                <div class="relatedhouse">
                    <ul>
                        <li>
                            <h3>碧桂园城市花园漫绿苑 - 4室2厅/136.13平米</h3>
                            <div class="detail">
                                <span class="time">签约时间 2022-10-14</span>
                                <span class="num2">203万</span>
                            </div>
                        </li>
                        <li>
                            <h3>汇港威华雅苑 - 2室2厅/84平米</h3>
                            <div class="detail">
                                <span class="time">签约时间 2022-10-14</span>
                                <span class="num2">85万</span>
                            </div>
                        </li>
                        <li>
                            <h3>富丽居 - 2室1厅/78平米</h3>
                            <div class="detail">
                                <span class="time">签约时间 2022-10-14</span>
                                <span class="num2">189万</span>
                            </div>
                        </li>
                    </ul>
                    <div class="ft">查看更多成交的明细</div>
                </div>
            </div>

            <!-- 内容 -->
            <div class="box-content" v-show="selectIndex == 1">
                <ul>
                    <li>
                        <h3>小区所在的城市</h3>
                        <!-- <div class="city">广州</div> -->
                         <input type="text" class="info" placeholder="请输入小区所在城市" v-model="city">

                    </li>
                    <li>
                        <h3>小区</h3>
                        <input type="text" class="info" placeholder="请输入小区名"  v-model="name">
                    </li>
                    <li>
                        <h3>房屋地址</h3>
                        <input type="text" class="info" placeholder="请输入房屋地址" v-model="address">
                    </li>
                    <li>
                        <h3>期望租金</h3>
                        <input type="text" class="info" placeholder="请输入期望租金" v-model="price">
                    </li>
                    <li>
                        <h3>出租方式</h3>
                        <input type="text" class="info" placeholder="请输入您的出租方式" v-model="style" >
                    </li>
                    <li>
                        <h3>称呼</h3>
                        <input type="text" class="info" placeholder="请输入您的称呼" v-model="Myname">
                    </li>
                    <li>
                        <h3>手机号码</h3>
                        <input type="text" class="info" placeholder="请输入手机号码" v-model="tel">
                    </li>
                </ul>
                <p class="tips">提示：您点击“提交委托”后，若您的房源通过平台初步审核，将会由平台上的经纪人和您取得联系，并对您的房源进行再次核实，核实无误后将与您建立服务关系。平台仅提供信息展示和网络技术服务。</p>
            </div>
        </div>
        <!-- 房源提交 -->
        <div class="m-submit" @click="submit">
            <div class="warp">提交委托</div>
        </div>
        
    </div>
</template>

<script>
    export default {
        name:"releaseView",
        data() {
            return {
                userInfo:"", //用户名
                selectIndex:0,   //选中下标
                releaseList:[],  //发布房源数组
                city:"", //城市
                name:"", //小区名
                address:"",  //地址名
                price:"",  //价格
                Myname:"", //我的称呼
                tel:"",  //电话号码
                style:"",  //租房方式
            }
        },
        methods:{
            // 提交
            submit(){
                let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

                if(!reg.test(this.tel)){//不正确处理
                  this.$message.error({
                    message:"手机号码错误",
                    center:true
                  });
                  return;
                }
                this.releaseList.push({
                    "city":this.city,
                    "name":this.name,
                    "address":this.address,
                    "price":this.price,
                    "Myname":this.Myname,
                    "tel":this.tel,
                    "style":this.style
                });
                window.localStorage.setItem("releaseList",JSON.stringify(this.releaseList));
                this.city = this.name = this.address = this.price = this.Myname = this.tel  =""

                this.$message({
                    message: "提交成功，正在审核",
                    type: 'success',
                    center: true
                });
            }
        },
        created(){
            // 判断是否有token值
            if(window.localStorage.getItem("token")){
              let phone = window.localStorage.getItem("token");
              this.userInfo = phone.substring(0,3) + "***" + phone.substring(phone.length -3);
            }
        }
    }
</script>

<style lang="scss" scoped>
.release{
    // 导航栏
    .banner{
        width: 100%;
        height: 36px;
        background-color: #394043;
        .container{
            display: flex;
            justify-content: space-between;
             .channelList{
                display: flex;
                align-items: center;
                height: 36px;
                width: 460px;
                margin-left: -10px;
                li{
                    font-size: 12px;
                    color: #a9abab;
                    margin-right: 21.5px;
                    cursor: pointer;

                    &:hover{
                        color: #fff;
                    }
                    &.selected{
                        color: #fff;
                    }
                }
            }
            .bannerRight{
                display: flex;
                align-items: center;
                .phone{
                    display: flex;
                    align-items: center;
                    i{
                        width: 12px;
                        height: 12px;
                        margin-right: 9px;
                        background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -495px -220px;
                    }
                    span{
                        font-size: 12px;
                        color: #fff;
                    }
                }
                .login{
                    display: flex;
                    align-items: center;
                    margin-right: 20px;
                    i{
                        width: 12px;
                        height: 12px;
                        margin-right: 9px;
                        background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -554px -173px;
                    }
                    span{
                        font-size: 12px;
                        color: #fff;
                        margin-right: 2px;
                    }
                }
            }
        }
       
    }
    .release-header{
        // height: 98px;
        padding: 30px 0 0 0;
        background: #f5f5f6;
        .meau{
            display: flex;
            justify-content: space-between;
            height: 28px;
            margin-bottom: 25px;
            margin-left: -10px;
            .meauLeft{
                height: 28px;
                width: 997px;
                display: flex;
                align-items: center;
                .logo{
                    width: 103px;
                    height: 36px;
                    // background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -120px -284px;
                    background: url("../assets/image/logo1.png") 0 center /cover ;
                    vertical-align: middle;
                    margin-top:-6px;
                }
                .typeList{
                    display: flex;
                    margin-left:34px;
                    align-items: center;
                    height: 28px;
                    li{
                        font-size: 16px;
                        line-height: 26px;
                        color: #333;
                        margin-right: 30px;
                        cursor: pointer;
                        &.selected{
                            color: #00ae66;
                        }
                    }
                }
            }
            .meauRight{
                display: flex;
                align-items: center;
                height: 28px;
                i{
                    width: 14px;
                    height: 18px;
                    margin-right: 10px;
                    background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -399px -220px;

                }
                span{
                    font-size: 16px;
                    color: #333;
                }
            }
        }

        .logoTitle{
            padding-top: 20px;
            padding-bottom: 50px;
            line-height: 1;
            text-align: center;
            background-color: #f5f5f6;
             margin-left: -10px;
           
           .tit{
                font-weight: bold;
                color: #333;
                font-size: 33px;
           }
           .sub-tit{
                margin-top: 15px;
                color: #878787;
                font-size: 16px;
           }
        }
    }

    // 房源发布信息
    .m-form{
        width: 990px;
        margin: 0 auto;
        margin-top: 55px;
        display: flex;
        justify-content: space-between;

        .box-left{
            width: 590px;

            ul{
                width: 100%;
                display: flex;
                flex-direction: column;

                li{
                    padding: 12px 0;
                    line-height: 40px;
                    border-bottom: 1px solid #eee;
                    display: flex;
                    align-items: center;
                    width: 100%;

                    h3{
                        color: #333;
                        font-weight: bold;
                        width: 120px;
                        font-size: 14px;

                    }

                    .info{
                        border: none;
                        outline: none;
                        height: 40px;
                        line-height: 20px;
                        padding: 10px 0;
                        width: 470px;
                        box-sizing: border-box;
                    }
                    .city{
                        color: #9c9fa1;
                        font-size: 14px;
                    }
                    &:first-child{
                        padding: 0;
                        padding-bottom: 25px;
                        line-height: 1;

                    }
                }
            }
        }
        
        .box-right{
            width: 340px;
            background-color: #f5f5f6;
            box-shadow: 0 3px 7px 0 rgb(0 0 0 / 14%);
            
            .hd{
                padding: 22px 30px;
                height: 90px;
                line-height: 1;
                color: #fff;
                background-color: #394043;
                box-sizing: border-box;

                .tit{
                    height: 14px;
                    font-size: 14px;
                }

                .sub-tit{
                    margin-top: 10px;
                    font-size: 22px;
                    height: 22px;

                    span{
                        font-weight: bold;

                        .unit{
                            font-weight: normal;
                        }
                    }
                }
            }
            
            .relatedhouse{

                width: 100%;
                ul{
                    line-height: 1;
                    padding: 8px 28px 0;
                    width: 100%;
                    box-sizing: border-box;
                    li{
                        padding: 20px 0;
                        border-bottom: 1px solid #e6e6e6;
                        width: 100%;
                        box-sizing: border-box;

                        h3{
                            color: #333;
                            font-weight: bold;
                            line-height: 20px;
                            font-size: 14px;

                            &:hover{
                                text-decoration: underline;
                            }
                        }
                        .detail{
                            margin-top: 6px;
                            width: 100%;
                            display: flex;
                            justify-content: space-between;

                            .time{
                                color: #aaa;
                                font-size: 12px;
                                white-space: pre-wrap;
                            }
                            .num2{
                                font-weight: bold;
                                color: #e4393c;
                                font-size: 14px;
                            }
                        }
                    }
                }
                .ft{
                    text-align: center;
                    color: #999;
                    font-size: 12px;
                    height: 60px;
                    line-height: 60px;
                }
            }
        }

        .box-content{
            color: #9399a5;
            margin: 0 auto;
            width: 590px;

            ul{
                width: 100%;
                display: flex;
                flex-direction: column;

                li{
                    padding: 12px 0;
                    line-height: 40px;
                    border-bottom: 1px solid #eee;
                    display: flex;
                    align-items: center;
                    width: 100%;

                    h3{
                        color: #333;
                        font-weight: bold;
                        width: 120px;
                        font-size: 14px;

                    }

                    .info{
                        border: none;
                        outline: none;
                        height: 40px;
                        line-height: 20px;
                        padding: 10px 0;
                        width: 470px;
                        box-sizing: border-box;
                    }
                    .city{
                        color: #9c9fa1;
                        font-size: 14px;
                    }
                    &:first-child{
                        padding: 0;
                        padding-bottom: 25px;
                        line-height: 1;

                    }
                }
            }

            .tips{
                color: #9399a5;
                width: 590px;
                margin-top: 30px;
                line-height: 20px;
                font-size: 14px;
            }
        }
    }

    // 房源提交
    .m-submit{
        width: 990px;
        margin: 0 auto;
        margin-top: 60px;
        display: flex;
        justify-content: center;

        .warp{
            width: 190px;
            line-height: 55px;
            font-size: 18px;
            color: #fff;
            text-align: center;
            border-radius: 2px;
            background-color: #00ac65;
            cursor: pointer;
        }
    }
}
</style>